import * as echarts from 'echarts'
import { onMounted, watch, computed, watchEffect, onUnmounted } from 'vue'
import { chartResize } from '@/views/dataBoard/compNew/ut';
import { get } from 'sortablejs';

const colors = ['#4394e4', "#2A60A7"];
const getS = (data, leftIndex, rightIndex) => {
  const { left, right } = data;
  const getItem = (arr, index) => {
    if (index > (arr.length - 1)) {
      return arr[index - arr.length]
    }
    return arr[index]
  }
  const s1 = {
    data: [getItem(left, leftIndex), getItem(left, leftIndex + 1),0, 0,0,0],
    type: 'bar',
    itemStyle: {
      color: colors[0],
    },
    barMaxWidth: 40,
  }
  const s2 = {
    data: [
      0,
      0,
      getItem(right, rightIndex),
      getItem(right, rightIndex + 1),
      getItem(right, rightIndex + 2),
      getItem(right, rightIndex + 3)
    ],
    type: 'bar',
    itemStyle: {
      color: colors[1],
    },
    barMaxWidth: 30,
    yAxisIndex: 1,
  }
  return [s1, s2]
}

const Comp = (props: any) => {
  const { id, data, key, showUnit = true, rate } = props;
  let myChart: any = null;
  let timmer: any = null;
  let leftIndex = 0;
  let rightIndex = 0;
  const setChart = (_data, leftMax, rightMax) => {
    if (_data) {
      myChart = echarts.init(document.getElementById(id) as any);
      const option = {
        grid: {
          left: '10%',
          top: '10%',
          bottom: '20%',
          right:'10%',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: false,
            color: colors[1],
            interval: 0,
            rotate: 30,
            fontSize: 10,
          },
          animationDuration: 300,
          animationDurationUpdate: 300,
          data: ["22.05", "22.06", "22.07", "22.08", "22.09", "22.10"],
        },
        yAxis: [{
          type: 'value',
          position: 'left',
          max: leftMax,
          axisLabel: {
            show: false,
            color: colors[0],
            interval: 2,
          },
          splitNumber: 3,
          nameTextStyle: {
            color: colors[2],
          },
          axisTick: {
            show: false,
            color: colors[0],
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: colors[0],
              interval: 2,
            },
            splitNumber: 3,
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 1)',
            },
            axisTick: {
              show: true,
              color: colors[0],
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: colors[0],
                type: [5, 10],
                dashOffset: 5,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[0]
            }
          }
        }, {
          type: 'value',
          position: 'right',
          max: rightMax,
          axisLabel: {
            show: false,
            color: colors[1],
            interval: 2,
          },
          splitNumber: 3,
          nameTextStyle: {
            color: colors[2],
          },
          axisTick: {
            show: false,
            color: colors[1],
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: colors[1],
              interval: 2,
            },
            splitNumber: 3,
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 1)',
            },
            axisTick: {
              show: true,
              color: colors[1],
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: colors[1],
                type: [5, 10],
                dashOffset: 5,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[1]
            }
          }
        }],
        series: getS(_data,leftIndex, rightIndex),
        animationDuration: 0,
        animationDurationUpdate: 300,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
      myChart.setOption(option);
    }
    chartResize(myChart);
  }
  watchEffect(
    () => {
      const _data = data[key];
      clearInterval(timmer);
      if (_data) {
        const leftMax = Math.max(..._data.left) * 1.1;
        const rightMax = Math.max(..._data.right) * 1.1
        setChart(_data, leftMax, rightMax);
      }
      if (rate) {
        timmer = setInterval(() => {
          const series = myChart.getOption().series;
          if (leftIndex < (_data.left.length - 1)) {
            leftIndex++;
          } else {
            leftIndex = 0;
          }
          if (rightIndex < (_data.right.length - 1)) {
            rightIndex++;
          } else {
            rightIndex = 0;
          }
          const sData = getS(_data, leftIndex, rightIndex);
          series[0].data = sData[0].data;
          series[1].data = sData[1].data;
          myChart.setOption({
            series: series
          })
        }, rate.value?.psi || 2000)
      }
    },
    {
      flush: 'post',
    },
  ),
    onUnmounted(() => {
      clearInterval(timmer);
    })
}

export default Comp
